<template>
  <section class="hidden md:flex flex-wrap items-center justify-center text-base md:ml-auto">
    <router-link
      to="/home"
      class="transition-colors rounded-[56px] mr-12 px-7 py-2 text-[#3c3c5a] hover:text-white hover:bg-primary text-base font-semibold cursor-pointer"
      active-class="text-white bg-primary"
      >首页</router-link
    >
    <router-link
      :to="'/car-rental/' + carId"
      class="transition-colors rounded-[56px] mr-12 px-7 py-2 text-[#3c3c5a] hover:text-white hover:bg-primary text-base font-semibold cursor-pointer"
      active-class="text-white bg-primary"
      >租车服务</router-link
    >
    <router-link
      to="/news"
      class="transition-colors rounded-[56px] mr-12 px-7 py-2 text-[#3c3c5a] hover:text-white hover:bg-primary text-base font-semibold cursor-pointer"
      active-class="text-white bg-primary"
      >最新资讯</router-link
    >
    <router-link
      v-if="!token"
      to="/login"
      class="transition-colors rounded-[56px] px-7 py-2 text-[#3c3c5a] hover:text-white hover:bg-primary text-base font-semibold cursor-pointer"
      active-class="text-white bg-primary"
      >登录</router-link
    >
    <el-dropdown placement="bottom" v-else>
      <el-avatar icon="el-icon-user-solid" @error="() => true">
        <img src="/error-img.png" />
      </el-avatar>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="handleClick('personCenter')">个人中心</el-dropdown-item>
        <el-dropdown-item @click.native="handleClick('logout')">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </section>
</template>

<script>
  export default {
    name: '',
    data() {
      return {}
    },
    computed: {
      ...mapState('user', ['token']),
      ...mapState('category', ['carId']),
    },
    methods: {
      ...mapMutations('user', ['CLEAR']),
      handleClick(value) {
        if (value === 'personCenter') {
          this.$router.push('/person-center')
        } else {
          // 退出登录
          this.CLEAR()
          this.$router.push('/home')
        }
      },
    },
  }
</script>

<style scoped></style>
